<template>
    <div style="height: calc(100vh - 80px)">
        <!--第一层-->
        <div style="display: flex;height: 50%">
            <!--上左 统计和-->
            <div class="model-class" style="margin-bottom: 10px">
                <div class="case-total all-case">
                    <div style="width:20%;float:left;text-align: center;border-right:1px dashed #fff;height: 100%">
                    </div>
                    <div style="width: 80%;text-align: right">总办理案件<span class="case-num">{{ totalCaseData.allCase
                            }}</span></div>
                </div>
                <div class="case-total daiban-case">
                    <div style="width:20%;float:left;text-align: center;border-right:1px dashed #fff;height: 100%">
                    </div>
                    <div style="width: 80%;text-align: right">待办理案件<span class="case-num">{{ totalCaseData.daibanCase
                            }}</span></div>
                </div>
                <div class="case-total banli-case">
                    <div style="width:20%;float:left;text-align: center;border-right:1px dashed #fff;height: 100%">
                    </div>
                    <div style="width: 80%;text-align: right">办理中案件<span class="case-num">{{ totalCaseData.banliCase
                            }}</span></div>
                </div>
                <div class="case-total wancheng-case">
                    <div style="width:20%;float:left;text-align: center;border-right:1px dashed #fff;height: 100%">
                    </div>
                    <div style="width: 80%;text-align: right">已完结案件<span class="case-num">{{ totalCaseData.wanchengCase
                            }}</span></div>
                </div>
            </div>
            <!--上中折线图-->
            <div class="model-class middle" style="margin-bottom: 10px;margin-right: 10px;margin-left: 10px">
                <div ref="zhexianChart" style="width:100%;height: 100%;padding-top:20px"></div>
            </div>
            <!--上右饼图-->
            <div class="model-class" style="margin-bottom: 10px;">
                <div ref="bingChart" style="width:100%;height: 100%;padding-top:20px"></div>
            </div>
        </div>

        <!--第二层-->
        <div style="display: flex;height: 50%">
            <!--下左饼图-->
            <div class="model-class" style="">
                <div ref="bingChart2" style="width:100%;height: 100%;padding-top:20px"></div>
            </div>
            <!--下中-->
            <div class="model-class middle" style="margin-right: 10px;margin-left: 10px">
                <div ref="paimingChart" style="width:100%;height: 100%;padding-top:10px"></div>
            </div>
            <!--下右饼图-->
            <div class="model-class">
                <div ref="bingChart3" style="width:100%;height: 100%;padding-top:20px"></div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import request from "@/utils/request";
export default {
    name: "Home",
    components: {
        echarts
    },
    data() {
        return {
            totalCaseData: {
                allCase: 0,
                daibanCase: 0,
                banliCase: 0,
                wanchengCase: 0,
            },
            TimeCaseData: {
                xAxis: [],
                series: []
            },
            caseSourceData: {
                data: []
            },
            caseTypeData: {
                yAxis: [],
                series: []
            },
            caseResultData: {
                data: []
            },
            // 登录用户信息
            loginUserInfo: {
                id: '',
                responsibleScope: '', //查询范围
                roleLevel: '', //角色等级
                unitId: '', //内设部门ID
                userRole: '', //角色ID
            },
        }
    },
    //初始化加载方法
    created() {
        const info = JSON.parse(localStorage.getItem("user"));
        this.loginUserInfo = {
            id: Number(info.id),
            responsibleScope: info.responsibleScope, //查询范围
            roleLevel: Number(info.roleLevel),
            unitId: Number(info.unitId),
            userRole: Number(info.userRole),
        }
        this.load();
    },
    methods: {
        load() {
            let unitId = '';
            let userId = '';
            if (this.loginUserInfo.unitId !== 1) {
                // 单位内部查询自己单位
                unitId = this.loginUserInfo.unitId;
            } else {
                // 管委会
                if (this.loginUserInfo.responsibleScope === '4') {
                    // 负责部分查询
                    userId = this.loginUserInfo.id;
                }
            }

            //统计和
            this.loadTotalCaseData(unitId, userId);
            //年度办理案件数量
            this.loadTimeCaseData(unitId, userId);
            //案件来源统计
            this.loadCaseSourceData(unitId, userId);
            //案件分类排名
            this.loadCaseTypeData(unitId, userId);
            //案件处理结果统计
            this.loadCaseResultData(unitId, userId);
        },
        drawzhexinaLine() {
            // 基于准备好的dom，初始化echarts实例
            const zhexianChart = echarts.init(this.$refs['zhexianChart'])
            let option = {
                title: {
                    text: '年度案件办理数量',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.TimeCaseData.xAxis
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1, // 最小间隔为1，不允许小数间隔
                    max: this.TimeCaseData.series.reduce((max, val) => Math.max(max, val + 1), 5),
                },
                series: [
                    {
                        data: this.TimeCaseData.series,
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            };
            zhexianChart.setOption(option);
        },
        drawbingLine() {
            let bingData = [];
            bingData.push({
                name: '待办理案件',
                value: this.totalCaseData.daibanCase,
                itemStyle: {
                    color: '#5470c6'
                }
            })
            bingData.push({
                name: '办理中案件',
                value: this.totalCaseData.banliCase,
                itemStyle: {
                    color: '#40e6c0'
                }
            })
            bingData.push({
                name: '已完结案件',
                value: this.totalCaseData.wanchengCase,
                itemStyle: {
                    color: '#fe5857'
                }
            })
            // 基于准备好的dom，初始化echarts实例
            const bingChart = echarts.init(this.$refs['bingChart'])
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '10%',
                    left: 'center'
                },
                title: {
                    text: '案件办理情况',
                    left: 'center'
                },
                series: [
                    {
                        name: '案件统计',
                        type: 'pie',
                        radius: ['0%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: bingData,
                    }
                ]
            };
            bingChart.setOption(option);
        },
        drawbingLine2() {
            // 基于准备好的dom，初始化echarts实例
            const bingChart = echarts.init(this.$refs['bingChart2'])
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '10%',
                    left: 'center'
                },
                title: {
                    text: '案件来源',
                    // subtext: '数据来源为城管大队录入',
                    left: 'center'
                },
                series: [
                    {
                        name: '案件来源',
                        type: 'pie',
                        radius: ['30%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.caseSourceData.data
                    }
                ]
            };
            bingChart.setOption(option);
        },
        drawbingLine3() {
            // 基于准备好的dom，初始化echarts实例
            const bingChart = echarts.init(this.$refs['bingChart3'])
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '10%',
                    left: 'center'
                },
                title: {
                    text: '案件程序分类',
                    left: 'center'
                },
                series: [
                    {
                        name: '案件程序分类',
                        type: 'pie',
                        radius: ['30%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.caseResultData.data
                    }
                ]
            };
            bingChart.setOption(option);
        },
        drawpaimingLine() {
            // 基于准备好的dom，初始化echarts实例
            const bingChart = echarts.init(this.$refs['paimingChart'])
            let option = {
                title: {
                    text: '案件分类排名',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    minInterval: 1, // 最小间隔为1，不允许小数间隔
                    max: this.caseTypeData.series.reduce((max, val) => Math.max(max, val + 1), 5),
                    axisLine: {
                        show: true, // 显示 x 轴线
                        lineStyle: {
                            color: '#6e7079'
                        }
                    },
                },
                yAxis: {
                    type: 'category',
                    data: this.caseTypeData.yAxis
                },
                color: ['#5086eb', '#68bac3'],
                series: [
                    {
                        type: 'bar',
                        data: this.caseTypeData.series
                    }
                ]
            };
            bingChart.setOption(option);
        },
        //统计和
        async loadTotalCaseData(unitId, userId) {
            await request.get("/case/handing", {
                params: {
                    unitId: unitId,
                    userId: userId
                }
            }).then(res => {
                if (res.code == '200') {
                    res.data.forEach(item => {
                        if (item.type == '总数量') {
                            this.totalCaseData.allCase = item.count;
                        } else if (item.type == '待办理') {
                            this.totalCaseData.daibanCase = item.count;
                        } else if (item.type == '办理中') {
                            this.totalCaseData.banliCase = item.count;
                        } else if (item.type == '已办理') {
                            this.totalCaseData.wanchengCase = item.count;
                        }
                    });
                }
                // 右上饼图
                this.drawbingLine();
            })
        },
        //年度办理案件数量
        async loadTimeCaseData(unitId, userId) {
            await request.get("/case/monthCount", {
                params: {
                    month: 12,
                    unitId: unitId,
                    userId: userId
                }
            }).then(res => {
                if (res.code == '200') {
                    res.data.forEach((item, index) => {
                        this.TimeCaseData.xAxis[index] = item.mont;
                        this.TimeCaseData.series[index] = item.count;
                    })
                }
                // 上中折线图
                this.drawzhexinaLine();
            })
        },
        //中队案件办理统计
        // async loadunitCaseData() {
        //     await request.get("/case/unit").then(res => {
        //         if (res.code == '200') {
        //             res.data.forEach(item => {
        //                 this.unitCaseData.data.push({
        //                     name: item.unitName,
        //                     value: item.count
        //                 })
        //             })
        //         }
        //         // 上右饼图
        //         this.drawbingLine();
        //     })
        // },
        //案件来源统计
        async loadCaseSourceData(unitId, userId) {
            await request.get("/case/inform", {
                params: {
                    unitId: unitId,
                    userId: userId
                }
            }).then(res => {
                if (res.code == '200') {
                    res.data.forEach(item => {
                        this.caseSourceData.data.push({
                            name: item.name,
                            value: item.count
                        })
                    })
                }
                // 左下饼图
                this.drawbingLine2();
            })
        },
        //案件分类排名
        async loadCaseTypeData(unitId, userId) {
            this.caseTypeData = {
                yAxis: [],
                series: []
            };
            await request.get("/case/typeRanking", {
                params: {
                    unitId: unitId,
                    userId: userId
                }
            }).then(res => {
                if (res.code == '200') {
                    for (let i = 0; i < res.data.length; i++) {
                        this.caseTypeData.yAxis.push(res.data[i].name);
                        this.caseTypeData.series.push(res.data[i].count);
                    }
                }
                // 左右饼图
                this.drawpaimingLine();
            })
        },
        //案件程序统计
        async loadCaseResultData(unitId, userId) {
            await request.get("/case/result", {
                params: {
                    unitId: unitId,
                    userId: userId
                }
            }).then(res => {
                if (res.code == '200') {
                    res.data.forEach(item => {
                        this.caseResultData.data.push({
                            name: item.result,
                            value: item.count
                        })
                    })
                }
                // 左右饼图
                this.drawbingLine3();
            })
        },
    },
}
</script>

<style scoped>
.model-class {
    flex: 1;
    background: #CCCCCC;
}

.model-class.middle {
    flex: 2;
}

.case-total {
    height: 25%;
    display: flex;
    justify-content: right;
    align-items: center;
    padding-right: 20px;
}

.all-case {
    background: #9cd159;
    margin-bottom: 10px;
    height: calc(25% - 7.5px)
}

.daiban-case {
    background: #65a6ff;
    margin-bottom: 10px;
    height: calc(25% - 7.5px)
}

.banli-case {
    background: #40e6c0;
    margin-bottom: 10px;
    height: calc(25% - 7.5px)
}

.wancheng-case {
    background: #fe5857;
    height: calc(25% - 7.5px)
}

.case-num {
    font-size: 28px;
    margin-left: 20px;
}
</style>
